<template>
  <div>
    <img :src="imgSrc" width="100%" height="100%" alt="" class="lost-container" />
    <div class="error-btn">
      <router-link to="/">
        <el-button type="info" size="large">返回首页</el-button>
      </router-link>
      <el-button class="last_page"
                 type="info"
                 size="large"
                 @click="goBack">
        返回上一页
      </el-button>
    </div>
  </div>

</template>

<script>
export default {
  name: "404",
  data() {
    return {
      imgSrc:require('@/assets/photos/404.webp')
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
  }
}
</script>

<style scoped>
.lost-container {
  background-size: 100% 100%;
  position: fixed;
}

.error-btn{
  position:absolute;
  /*定位方式绝对定位absolute*/
  top:65%;
  left:50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform:translate(-50%,-50%);
  /*实现块元素百分比下居中*/
  width:450px;
  padding:50px;
  box-sizing:border-box;
  border-radius:15px;
  /*边框圆角，四个角均为15px*/
  margin-left: 50px;
}

.last_page {
  margin-left: 40px;
}

</style>
